<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
  </head>
  
  <body>
    <div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<script type="text/javascript">
							try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
						</script>

						<ul class="breadcrumb">
							<li>
								<i class="icon-home home-icon"></i>
								<a href="#">Home</a>
							</li>

							<li>
								<a href="#">Tables</a>
							</li>
							<li class="active">Simple &amp; Dynamic</li>
						</ul><!-- .breadcrumb -->

						<div class="nav-search" id="nav-search">
							<form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
							</form>
						</div><!-- #nav-search -->
					</div>

					<div class="page-content">
						<div class="row">
						<!-- 查询条件 -->
							<div class="input-group col-xs-12 clearfix mar-bottom" style="margin-top: 10px;">
								<div class="col-xs-3">
									<div class="input-group form-group">
										<div class="input-group-addon">用户名</div>
										<input id="username" type="text" class="form-control" name="username" placeholder="用户名">
									</div>
								</div>
								<div class="col-xs-3">
									<div class="input-group form-group has-feedback">
										<div class="input-group-addon">所属部门</div>
										<input type="text" class="form-control" id="deptNo" name="deptNo" placeholder="所属部门" data-bv-field="alarmPersonName"><i class="form-control-feedback bv-no-label" data-bv-icon-for="alarmPersonName" style="display: none;"></i>
									</div>
								</div>
								<div class="col-xs-6">
									<div class="row">
										<div class="col-xs-12">
											<div class="input-group form-group date form_datetime" style="float: left; width: 55%;">
												<div class="input-group-addon">报警日期</div>
												<input class="form-control date-picker" id="id-date-picker-1" placeholder="开始时间" type="text" data-date-format="dd-mm-yyyy">
												<span class="input-group-addon">
													<i class="icon-calendar bigger-110"></i>
												</span>
											</div>
											<span style="float: left; float: left; width: 5%; display: inline-block; line-height: 36px; text-align: center;">-</span>
											<div class="input-group form-group date form_datetime" style="float: right; width: 40%;">
												<input class="form-control date-picker" id="id-date-picker-1" placeholder="结束时间" type="text" data-date-format="dd-mm-yyyy">
												<span class="input-group-addon">
													<i class="icon-calendar bigger-110"></i>
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 第二行 -->
							<div class="input-group col-xs-12 clearfix mar-bottom">
								<div class="col-xs-3 form-group control-group">
									<div class="input-group form-group">
										<div class="input-group-addon">报警种类</div>
										<select class="form-control" id="alarmVariety" name="alarmVariety"><option value="-1">请选择</option><option value="1">报案</option><option value="2">举报</option><option value="3">咨询</option><option value="4">投诉</option><option value="5">申诉</option></select>
									</div>
								</div>
								<div class="col-xs-3">
									<div class="input-group form-group">
										<div class="input-group-addon">行政区划</div>
										<select class="form-control" id="compartment" name="compartment"><option value="-1">请选择</option><option value="370202">市南区</option><option value="370203">市北区</option><option value="370212">崂山区</option><option value="370213">李沧区</option><option value="370214">城阳区</option><option value="370281">胶州市</option><option value="370282">即墨市</option><option value="370283">平度市</option><option value="370284">黄岛区</option><option value="370285">莱西市</option></select>
									</div>
								</div>
								<div class="col-xs-6 container-fluid">
									<button class="btn btn-info" type="button" id="search-btn" name="queryBtn" >查询<i class="icon-search align-top bigger-125 icon-on-right"></i></button>
									<button class="btn btn-default" type="reset" id="Reset-btn" >重置<i class="icon-undo align-top bigger-125 icon-on-right"></i></button>
									<button class="btn btn-purple" id="add-btn" onclick="addUserModal()" >新增用户<i class="glyphicon glyphicon-plus align-top bigger-125 icon-on-right"></i></button>
									<button class="btn btn-success" id="add-btn" onclick="uploadUser()" >导入用户<i class="icon-cloud-upload align-top bigger-125 icon-on-right"></i></button>
									<button class="btn btn-warning" id="add-btn" onclick="downloadUser()" >导出用户<i class="icon-cloud-download align-top bigger-125 icon-on-right"></i></button>
								</div>
							</div>
							
							<!-- 列表 -->
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<!-- <h3 class="header smaller lighter blue"></h3> -->
										<div class="table-header">
											用户管理
										</div>

										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover" >
												<thead>
													<tr>
														<th class="hidden-280">
															<label>
																<input type="checkbox" />
																<span class="lbl"></span>
															</label>
														</th>
														<th>用户名</th>
														<th>性别</th>
														<th class="hidden-480">年龄</th>
														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															工号
														</th>
														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															注册时间
														</th>
														<th class="hidden-480">状态</th>
														<th >操作</th>
													</tr>
												</thead>
											</table>
										</div>
									</div>
								</div>
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div><!-- /.main-content -->
				

		<!-- 添加用户模态框 -->
		<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">新增用户</h4>
		      </div>
		      <div class="modal-body">
		      	<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" for="username"> 用户名 </label>
						<div class="col-sm-9">
							<input type="text" id="add_username" placeholder="Username" class="col-xs-10 col-sm-5" />
						</div>
					</div>
	
					<div class="space-4"></div>
	
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" for="password"> 密码</label>
	
						<div class="col-sm-9">
							<input type="password" id="add_password" placeholder="Password" class="col-xs-10 col-sm-5" />
							<span class="help-inline col-xs-12 col-sm-7">
								<span class="middle">Inline help text</span>
							</span>
						</div>
					</div>
	
					<div class="space-4"></div>
	
					<div class="form-group">
						<div class="col-sm-3 control-label no-padding-right">
							<label for="form-field-3"> 性别 </label>
						</div>
						<div class="col-sm-9">
							<label class="radio-inline"  >
							  <input type="radio" name="add_gender"  value="1" checked="checked" > 男
							</label>
							<label class="radio-inline">
							  <input type="radio" name="add_gender"  value="2"> 女
							</label>
						</div>
					</div>
	
					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn btn-info" type="button" onclick="addUser();">
								<i class="icon-ok bigger-110"></i>
								提交
							</button>
	
							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="icon-undo bigger-110"></i>
								重置
							</button>
						</div>
					</div>
				</form>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- 用户信息的模态框 -->
		<div class="modal fade bs-example-modal-lg" id="userInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		        <h4 class="modal-title" id="myModalLabel">用户信息</h4>
		      </div>
		      <div class="modal-body">
		      	<form class="form-horizontal" role="form">
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" > 用户名: </label>
						<label class="col-sm-9 " id="info_username" ></label>
					</div>
					<div class="space-4"></div>
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" > 密码:</label>
						<label class="col-sm-9 " id="info_password" ></label>
					</div>
					<div class="space-4"></div>
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right" > 性别:</label>
						<label class="col-sm-9 " id="info_gender" ></label>
					</div>
	
				</form>
		      </div>
		    </div>
		  </div>
		</div>
		
		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			var basePath = '<%=basePath%>';
		</script>
		<script src="assets/js/date-time/bootstrap-datepicker.min.js"></script>
		<script src="assets/js/date-time/bootstrap-timepicker.min.js"></script>
		<script src="assets/js/date-time/moment.min.js"></script>
		<script src="assets/js/date-time/daterangepicker.min.js"></script>
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.fnReloadAjax.js"></script>
		<script src="assets/js/bootbox.min.js"></script>
		
		<script src="js/user.js"></script>
		
  </body>
</html>
